<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/pure-min.css">
    <link rel="stylesheet" href="css/marketing.css">
    <script lang="javascript" src="js/zepto.min.js"></script>
    <style scoped>
        body {
            font-family: sans-serif;
            padding: 60px 20px;
        }

        @media (min-width: 600px) {
            body {
                padding: 60px;
            }
        }

        .splash-container {
            background: #21caa8de;
        }

        .range-slider {
            margin: 60px 0 0 0%;
        }

        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }


        .range-slider {
            margin: 60px 0 0 0%;
        }

        .range-slider {
            width: 100%;
        }

        .range-slider__range {
            -webkit-appearance: none;
            width: calc(100% - (73px));
            height: 10px;
            border-radius: 5px;
            background: #d7dcdf;
            outline: none;
            padding: 0;
            margin: 0;
        }

        .range-slider__range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #2c3e50;
            cursor: pointer;
            transition: background .15s ease-in-out;
        }

        .range-slider__range::-webkit-slider-thumb:hover {
            background: #1abc9c;
        }

        .range-slider__range:active::-webkit-slider-thumb {
            background: #1abc9c;
        }

        .range-slider__range::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border: 0;
            border-radius: 50%;
            background: #2c3e50;
            cursor: pointer;
            transition: background .15s ease-in-out;
        }

        .range-slider__range::-moz-range-thumb:hover {
            background: #1abc9c;
        }

        .range-slider__range:active::-moz-range-thumb {
            background: #1abc9c;
        }

        .range-slider__range:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
        }

        .range-slider__value {
            display: inline-block;
            position: relative;
            width: 60px;
            color: #fff;
            line-height: 20px;
            text-align: center;
            border-radius: 3px;
            background: #2c3e50;
            padding: 5px 10px;
            margin-left: 8px;
        }

        .range-slider__value:after {
            position: absolute;
            top: 8px;
            left: -7px;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-right: 7px solid #2c3e50;
            border-bottom: 7px solid transparent;
            content: '';
        }

        ::-moz-range-track {
            background: #d7dcdf;
            border: 0;
        }

        input::-moz-focus-inner,
        input::-moz-focus-outer {
            border: 0;
        }

        .light {
            height: 20px;
            width: 20px;
            padding: 3px;
            border: 2px solid dimgrey;
            border-radius: 16px;
        }

        #light_box {
            padding: 10px;
            border-radius: 30px;
            font-weight: bolder;
        }

        .light_0 {
            color: white;
            background: rgb(0, 0, 0);
        }

        .light_1 {
            background: rgb(255, 105, 180);
        }

        .light_2 {
            background: rgb(224, 255, 255);
            color: darkslategray;
        }

        .light_3 {
            background: rgb(2, 192, 255);
        }

        .circle-content {
            position: relative;
            width: 120px;
            height: 120px;
            border-radius: 120px;
            background: #dce4ff;
            margin: 50px auto;
        }

        .right-arch {
            position: absolute;
            left: 60px;
            width: 60px;
            height: 120px;
            border-left: 0;
            border-radius: 0 60px 60px 0;
            border: 20px solid #5178ff;
        }

        .left-arch {
            position: absolute;
            width: 60px;
            height: 120px;
            border: 20px solid;
            border-right: 0;
            border-radius: 60px 0 0 60px;
            transform-origin: right center;
            transform: rotate(0deg);
        }

        .center {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            padding-top: 23px;
            border-radius: 100px;
            background: #fff;
            text-align: center;
        }

        .annular {
            width: 200px;
            height: 200px;
            text-align: center;
            position: relative;
            line-height: 200px;
            margin: 20px auto;
        }

        .annular-out {
            right: 0;
            top: 0;
            position: absolute;
            border: 20px solid #09c;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            clip: rect(auto, 100px, auto, auto);
            transform: rotate(180deg);
        }

        .annular-in {
            right: 0;
            top: 0;
            position: absolute;
            border: 20px solid rgb(204, 0, 85);
            bottom: 0;
            left: 0px;
            border-radius: 50%;

            transform: rotate(30deg);
            clip: rect(auto, 100px, auto, auto);
        }

        .annular::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: transparent;
            border: 20px solid #9cf;
            border-radius: 50%;
        }

        .annular>div {
            position: absolute;
        }

        .annular>.annular-left {
            width: 100px;
            height: 200px;
            border-radius: 100px 0 0 100px;
            border: 20px solid #00ccf6;
            border-right: 0;
            transform-origin: right center;
            transform: rotate(0deg);
        }

        .annular>.annular-right {
            width: 100px;
            height: 200px;
            border-radius: 0 100px 100px 0;
            border: 20px solid #00ccf6;
            border-left: 0;
            left: 100px;
            transform-origin: left center;
            transform: rotate(0deg);
        }

        .annular>.annular-txt {
            z-index: 10;
            width: 100%;
            font-size: 28px;
            color: #2c3e50;
        }
    
    </style>
</head>

<body>
    <div class="header">
        <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
            <a class="pure-menu-heading" href=""> 鱼缸灯光控制中心 </a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link timeshow" id="timeshow">0000-00-00 00:00:00</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link reboot">重启</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="splash-container">

        <div class="splash">
            <div class="splash-head">
                <div id="light_box" class="light_0">
                    <span>OFF</span>
                </div>
            </div>
            <p class="splash-subhead">
                Push Button to Swith Light (OFF , RED, WHITE, BLUE)
            </p>
            <p>
                <button class="pure-button pure-button-primary" onclick="swithLight(-1);">切换灯光</button>
            </p>
            <div class="pure-g">
                <div class="pure-u-1-4"><button class="light_0 pure-button" onclick="swithLight(0);">关闭</button></div>
                <div class="pure-u-1-4"> <button class="light_1 pure-button" onclick="swithLight(1);">红</button></div>
                <div class="pure-u-1-4"> <button class="light_2 pure-button" onclick="swithLight(2);">白</button></div>
                <div class="pure-u-1-4"> <button class="light_3 pure-button" onclick="swithLight(3);">蓝</button></div>
            </div>
            <p>
            <div class="range-slider">
                <input id="range-slider__range" class="range-slider__range" type="range" value="100" min="30"
                    max="1023">
                <span class="range-slider__value">30%</span>
            </div>
            </p>
            <div class="content">
                <div class="annular">
                    <div class="annular-left"></div>
                    <div class="annular-right"></div>
                    <div class="annular-txt">
                        <span>0℃</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>

<script>

    var timestamp = 0;

    $(function () {
        rangeSlider();
        setInterval(updateTime, 1000);

        $.ajax({
            type: "post",
            url: "fishlamp?def",
            dataType: "json",
            success: function (data) {
                swithClass(data.s, data.v);
                console.log(data.t);
                timestamp = data.t - (8 * 60 * 60);
                console.log(timestamp);
                loadTempture();
            }
        });
    });

    $("a.reboot").on('click', function (e) {
        if (confirm("您确定要立即重新启动吗？")) {
            $.post("fishlamp?sys=1");
            setTimeout(function () {
                location.reload();
            }, 2500);
        }
    });

    function updateTime() {
        $("a.timeshow").text(dateFormat(timestamp * 1000));
        timestamp++;
    }

    function loadTempture() {
        $.ajax({
            type: "post",
            url: "fishlamp?tempture",
            dataType: "json",
            success: function (data) {
                setPercentVal(data.t);
                setTimeout(loadTempture, 10000);
            }
        });
    }

    function setPercentVal(value) {
        let left = $(".annular>.annular-left");
        let right = $(".annular>.annular-right");
     
        if (value > 100) value = 100;
        if (value % 1 !== 0) {  //若value为小数，保留一位小数
            value = value.toFixed(1);
        }
        var deg;
        // console.log(-deg);
        if (value < 50) {
            deg = (50 - value) / 50 * 180;
            // hide.css("display", "inherit");
            left.css({
                "transform": "rotate(" + (-deg) + "deg)"
            });
            right.css({
                "transform": "rotate(0deg)",
                "border-color": "#9cf"
            });
        } else {
            // hide.css("display", "none");
            deg = (50 - (value - 50)) / 50 * 180;
            left.css({
                "transform": "rotate(0deg)"
                
            });
            right.css({
                "border-color": "#00ccf6",
                "transform": "rotate(" + (-deg) + "deg)"
            });
        }
        $(".annular>.annular-txt").text(value + "℃");
    }


    function dateFormat(t) {
        var date = new Date(t);
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()

        var hour = date.getHours()
        var minu = date.getMinutes()
        var sec = date.getSeconds()

        month = month >= 10 ? month : '0' + month
        day = day >= 10 ? day : '0' + day
        hour = hour >= 10 ? hour : '0' + hour
        minu = minu >= 10 ? minu : '0' + minu
        sec = sec >= 10 ? sec : '0' + sec

        return `${year}-${month}-${day} ${hour}:${minu}:${sec}`
    }


    function swithLight(idx) {
        $.ajax({
            type: "post",
            url: "fishlamp",
            data: { op: idx },
            dataType: "json",
            success: function (data) {
                swithClass(data.s, data.v);
            }
        });
    }

    function swithClass(idx, val) {
        $("#light_box").removeClass().addClass("light_" + idx);
        $('#range-slider__range').val(val).next().text((val / 10.23).toFixed(2) + "%");

        switch (idx) {
            case 0:
                $("#light_box").css({
                    "background-color": "rgba(0, 0, 0, 1)",
                    "filter": "drop-shadow(4px 4px 6px rgb(0, 0, 0))"
                }).children().text("OFF");
                break;
            case 1:
                $("#light_box").css({
                    "background-color": 'rgba(255, 105, 180,' + val / 1023 + ')',
                    "filter": "drop-shadow(4px 4px 6px rgb(255, 105, 180))"
                }).children().text("red");

                break;
            case 2:
                $("#light_box").css({
                    "background-color": 'rgba(224, 255, 255,' + val / 1023 + ')',
                    "filter": "drop-shadow(4px 4px 6px rgb(224, 255, 255))"
                }).children().text("white");

                break;
            case 3:
                $("#light_box").css({
                    "background-color": 'rgba(2, 192, 255,' + val / 1023 + ')',
                    "filter": "drop-shadow(4px 4px 6px rgb(2, 192, 255))"
                }).children().text("blue");

                break;
        }
    }

    var rangeSlider = function () {
        $('#range-slider__range').on('input', function () {
            $(this).next().text((this.value / 10.23).toFixed(2) + "%")
        });

        $('#range-slider__range').on('change', function () {
            $.ajax({
                type: "post",
                url: "fishlamp",
                data: { b: this.value },
                dataType: "json",
                success: function (data) {
                    swithClass(data.s, data.v);
                }
            });
        });
    };


</script>

</html>